<script setup lang="ts">
import {useTablePlus} from "@/components/ATable/f";
import type {PropType} from "vue";
import {LoadFunction, TableColumn} from "@/components/ATable/types";

const props = defineProps({
  columns:{
    type:Object as PropType<TableColumn[]>,
    required:true ,
  },
  height:{
    type:[Number,String],
    default: '50vh'
  },
  query:Object as any,
  loadFunction:{
    type:Function as PropType<LoadFunction>,
    required:true,
  },
  autoLoad:{
    type:Boolean,
    default: true,
  },
  useSelect:{
    type:Boolean,
    default: true,
  },
  selectType:{
    type:String as PropType<'checkbox'|'radio'>,
    default:'checkbox'
  },
  tableSlot:Object as PropType<Record<string, unknown>>,
});
const emits = defineEmits<{
  (e:'selected',value:any[]|any):void;
}>();
const show=ref(false)
const T = useTablePlus(
  props.loadFunction,
  props.columns,
  props.query,
  props.autoLoad,
  props.useSelect,
  props.selectType,
  props.tableSlot);
const getTable=()=>{
  return T.tableRef
}

const selected=()=>{
  const s=T.tableRef.value?.getSelected()
  emits('selected',s)
  close()
}
const open=(select?:any|any[])=>{
  show.value = true
  nextTick(()=>{
    if(select){
      T.tableRef.value?.setSelected(select)
    }
  })
}
const close=()=>{
  show.value = false
}
defineExpose({
  getTable,
  open,
  close,
})
</script>

<template>
  <el-dialog v-model="show" destroy-on-close>
    <div :style="{height:props.height}">
      <T.Table/>
    </div>
    <template #footer>
      <el-button @click="close" :text="false">取消</el-button>
      <el-button @click="selected" type="primary" :text="false">选择</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
